<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="mylist">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script>
        //点击li 打印item$
        //一次性给所有li 注册事件？
        const lis = document.querySelectorAll('ui#myList li');
        //不可以给一个nodelist 一次性声明
        // lis.addEventListener('click',function(event){
        //     console.log(event.target,"////");
            
        // },false)
        // es6新的循环 计数循环 let i = 0 ;i<lis.length;i++ ->这个对CPU友好，但可读性差
        // for(let item of lis){ //更语义化
        //     //向浏览器 eventloop 注册了一堆事件 
        //     //如果li过多 性能很差
        //     //没有必要
        //     item.addEventListener('click',function(event){
        //         console.log(event.target.innerText);
                
        //     },false)
        // }

        //event.target 目标阶段 事件发生在的元素 而不是事件监听的元素
        //委托给父元素 react 性能优化到极致 #root 挂载点
    </script>
</body>
</html>